import React, { useState } from 'react';
import { List, Avatar, Badge, Input, Button, Empty, Spin, Tooltip } from 'antd';
import { 
  UserOutlined, 
  TeamOutlined, 
  SearchOutlined, 
  CloseCircleOutlined 
} from '@ant-design/icons';

/**
 * 联系人列表组件
 * 显示联系人及最近聊天信息
 */
const ContactList = ({ 
  contacts = [], 
  loading = false, 
  onSelectContact,
  selectedContactId
}) => {
  const [searchText, setSearchText] = useState('');
  
  // 过滤联系人
  const filteredContacts = contacts.filter(contact => 
    contact.name.toLowerCase().includes(searchText.toLowerCase())
  );
  
  // 清除搜索
  const clearSearch = () => {
    setSearchText('');
  };

  return (
    <div className="contact-list-container">
      {/* 搜索框 */}
      <div className="contact-search">
        <Input
          placeholder="搜索联系人..."
          value={searchText}
          onChange={e => setSearchText(e.target.value)}
          prefix={<SearchOutlined />}
          suffix={
            searchText ? (
              <CloseCircleOutlined onClick={clearSearch} style={{ cursor: 'pointer' }} />
            ) : null
          }
        />
      </div>
      
      {/* 联系人列表 */}
      {loading ? (
        <div className="contact-list-loading">
          <Spin tip="加载联系人..." />
        </div>
      ) : filteredContacts.length === 0 ? (
        <Empty 
          description={
            searchText 
              ? "没有找到匹配的联系人" 
              : "暂无联系人"
          } 
          image={Empty.PRESENTED_IMAGE_SIMPLE} 
        />
      ) : (
        <List
          className="contact-list"
          itemLayout="horizontal"
          dataSource={filteredContacts}
          renderItem={contact => (
            <List.Item
              className={`contact-item ${selectedContactId === contact.id ? 'selected' : ''}`}
              onClick={() => onSelectContact(contact.id)}
            >
              <List.Item.Meta
                avatar={
                  <Badge count={contact.unread || 0} size="small">
                    <Avatar 
                      icon={contact.is_group ? <TeamOutlined /> : <UserOutlined />} 
                      src={contact.avatar} 
                    />
                  </Badge>
                }
                title={contact.name}
                description={
                  <div className="contact-last-message">
                    {contact.last_message}
                  </div>
                }
              />
              <div className="contact-time">
                <Tooltip title={contact.time}>
                  <span>{contact.time}</span>
                </Tooltip>
              </div>
            </List.Item>
          )}
        />
      )}
    </div>
  );
};

export default ContactList; 